<template>
  <div class="allBoxFather">
        <div class="headerBoxTop">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 30H40V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V30Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M40 30V6C40 4.89543 39.1046 4 38 4H10C8.89543 4 8 4.89543 8 6V30" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M22 37H26" stroke="#333" stroke-width="4" stroke-linecap="round"/></svg>
            <span style="margin-left:10px;">手机相关设置</span>
        </div>
        
        <div class="content" style="margin-top:20px;display: flex; justify-content: space-between;justify-content: flex-start;padding-left:40px;
            flex-direction: row;
            flex-wrap: wrap;overflow-y: auto;overflow-x: hidden;">
    <el-backtop target=".content"></el-backtop>
            <div style="padding-top:15px;padding-left:20px;" class="forItem" v-for="(item,index) in list" :key="index">
            <p style="word-wrap: break-word;"><strong>NAME: </strong>{{ item.NAME }}</p>
            <p style="word-wrap: break-word;"><strong>FIELD: </strong>{{ item.FIELD }}</p>
            <p><strong>CONTENT: </strong>{{ item.CONTENT }}</p>
            </div>
        </div>
  </div>
</template>

<script>
  import { getRxTmpPathApi,getPhoneBaseInfoApi } from '@/api/phoneInfo/index'
export default {
    name:'proofInfo',
    props:['sendData'],
    data(){
        return{
            list:[]
        }
    },
    created(){
        this.init();
    },
    mounted(){

    },
    methods:{
        init(){
            let node = this.sendData;
            let dataJson = {
                "proof_num":node.proof_num,
            }
            getPhoneBaseInfoApi(dataJson).then(res=>{
                this.list = res.data;
                
            })
        },
    }
}
</script>

<style scoped>
.content{
        height: calc(100% - 50px);
        overflow-y: auto;
    }
    .allBoxFather{
        padding: 10px;
        height: 100%;
    }
    .headerBoxTop{
        height: 50px;
        border-bottom: 1px solid rgb(220, 220, 220);
        line-height: 50px;
        font-size: 18px;
        padding-left: 10px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    .forItem{
        width: 300px;
        min-height: 120px;
        border: 1px solid #dddddd;
        margin-right: calc(10% / 3);
        margin-bottom:30px;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

</style>